<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>校园简介</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            background-color: #d2d2d2;
        }

        #mainBody {
            margin-top: 50px;
        }

        .textRow {
            margin: 30px 0;
        }

        #schoolLogo {
            margin-top: 30px;
        }

        #schoolLogoImg {
            height: 100px;
            width: 100px;
        }

        .schoolPic {
            width: 250px;
            height: 300px;
            margin: 30px 0;
        }

        #editPic {
            display: none;
            position: fixed;
            margin: 50px;
            width: 40%;
            height: 80%;
            left: 30%;
            top: 30%;
        }

        #pic {
            display: inline-block;
            position: absolute;
            right: 100px;
            top: 0;
        }

        #test1 {
            position: absolute;
            top: -50px;
        }

        #deleteBtn {
            position: absolute;
            top: -50px;
        }

        #editUserPic {
            position: relative;
            right: 50px;
        }
    </style>
</head>
<body style="background-color: whitesmoke">
<div id="editPic">
    <div id="pic" class="layui-upload">
        <button type="button" class="layui-btn" id="test1">更换图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="editUserPic" v-bind:src="picAddress" style="width: 200px;height: 300px;">
            <p id="demoText"></p>
        </div>
    </div>
    <div class="layui-form-item" id="deleteBox">
        <div class="layui-input-block">
            <button id="deleteBtn" v-on:click="deletePic" type="button" class="layui-btn">删除图片</button>
        </div>
    </div>
    <input type="hidden" name="pictureId" id="editPictureId" v-model="picId">
    <input type="hidden" id="action" v-model="action">
    <button v-on:click="sub">提交</button>

</div>
<div id="mainBody" class="container" style="background-color: whitesmoke">
    <div class="row" style="margin: 30px">
        <div class="col-md-2" id="schoolLogo">
            <img id="schoolLogoImg" src="http://rtevhzzsy.hn-bkt.clouddn.com/picture/70406b9c644a4e54b91aca3441d0bf68">
        </div>
        <div class="col-md-10" id="schoolInfoRow">
            <div class="row textRow">
                <div class="col-md-6 textLine">
                    学校名称&nbsp;&nbsp;
                    <span id="schoolName" class="textContent">
                        {{schoolInfo.schoolName}}
                    </span>
                </div>
                <div class="col-md-6 textLine">
                    学校简称&nbsp;&nbsp;
                    <span id="schoolSimpleName" class="textContent">
                        {{schoolInfo.schoolSame}}
                    </span>
                </div>
            </div>
            <div class="row textRow">
                <div class="col-md-6 textLine">
                    所属区域&nbsp;&nbsp;
                    <span id="schoolArea" class="textContent">
                        {{schoolInfo.schoolArea}}
                    </span>
                </div>
                <div class="col-md-6 textLine">
                    学校地址&nbsp;&nbsp;
                    <span id="schoolAddress" class="textContent">
                        {{schoolInfo.schoolAddress}}
                    </span>
                </div>
            </div>
            <div class="row textRow">
                <div class="col-md-6 textLine">
                    学校类型&nbsp;&nbsp;
                    <span id="schoolType" class="textContent">
                        {{schoolInfo.schoolType}}
                    </span>
                </div>
                <div class="col-md-6 textLine">
                    教育类型&nbsp;&nbsp;
                    <span id="eduType" class="textContent">
                        {{schoolInfo.eduType}}
                    </span>
                </div>
            </div>
            <div class="row textRow">
                <div class="col-md-6 textLine">
                    联系电话&nbsp;&nbsp;
                    <span id="schoolTel" class="textContent">
                        {{schoolInfo.schoolTel}}
                    </span>
                </div>
                <div class="col-md-6 textLine">
                    联系邮箱&nbsp;&nbsp;
                    <span id="schoolEmail" class="textContent">
                        {{schoolInfo.schoolEmail}}
                    </span>
                </div>
            </div>
            <div class="row textRow">
                <div class="col-md-12 textLine">
                    学校简介
                    <br>
                    <br>
                    <span id="schoolIntroduction">
                        {{schoolInfo.schoolIntro}}
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="schoolPic">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-2">
                    <button v-on:click="insertBtn">新增图片</button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3" v-for="(picture,index) in pictures">
                    <img class="schoolPic" v-bind:src="picture.pictureAddress" v-on:click="clickEvent(index)">
                </div>
            </div>
        </div>

    </div>
</div>
<script type="text/javascript">

    var info = new Vue({
        el: "#schoolInfoRow",
        data: {
            schoolInfo: {
                schoolId: "",
                schoolEmail: '',
                schoolIntro: '',
                schoolName: '',
                schoolSame: '',
                schoolArea: '',
                schoolAddress: '',
                schoolType: '',
                eduType: '',
                schoolTel: ''
            }
        },
        methods: {
            loadData: function () {
                var inf = this
                $.ajax({
                    url: "/introduction/query",
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        inf.schoolInfo = res.data
                    }
                })

            }
        },
        mounted: function () {
            this.loadData();
        }
    })
    var pic = new Vue({
        el: '#schoolPic',
        data: {
            pictures: [],
            picture: {
                pictureId: "",
                pictureAddress: ''
            }
        },
        methods: {
            loadData: function () {
                _this = this;
                $.ajax({
                    url: "/introduction/queryPic",
                    dataType: 'json',
                    type: 'get',
                    success: function (res) {
                        _this.pictures = res.data
                    }
                })
            },
            clickEvent: function (pictureIndex) {
                _this.this;
                $("#editUserPic").attr("src", _this.pictures[pictureIndex].pictureAddress)
                $("#editPictureId").val(_this.pictures[pictureIndex].pictureId)
                $("#test1").html("更换图片")
                $("#deleteBox").css("display", "inline-block")
                $("#action").val('/introduction/updatePic')
                layer.open({
                    title: '图片操作',
                    type: 1,
                    area: ['40%', '70%'],
                    content: $("#editPic"),
                    shade: 0
                });

            },
            insertBtn: function () {
                $("#editUserPic").attr("src", "")
                $("#editPictureId").attr("src", "")
                $("#test1").html("上传图片")
                $("#deleteBox").css("display", "none")
                $("#action").val('/introduction/insertPic')
                layer.open({
                    title: '添加图片',
                    type: 1,
                    area: ['40%', '70%'],
                    content: $("#editPic"),
                    shade: 0
                });
            }
        },
        mounted: function () {
            this.loadData();
        }
    })
    var edit = new Vue({
        el: '#editPic',
        data: {
            picAddress: "",
            picId: "",
            action: ""
        },
        methods: {
            sub: function () {
                var id = $("#editPictureId").val()
                var action = $("#action").val()
                var addr = $("#editUserPic").attr("src")
                $.ajax({
                    url: action,
                    type: 'put',
                    dataType: 'json',
                    data: JSON.stringify({
                        pictureId: id,
                        pictureAddress: addr
                    }),
                    contentType: 'application/json',
                    success: function (data) {
                        if (data.code == 0) {
                            location.reload()
                        } else {
                            alert(msg)
                        }
                    }
                })
            },
            deletePic: function () {
                if (confirm("确定删除这张图片?")){
                    var id = $("#editPictureId").val()
                    $.ajax({
                        url: '/introduction/deletePic',
                        type: 'delete',
                        data: JSON.stringify({pictureId: id}),
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (data) {
                            if (data.code == 0) {
                                location.reload();
                            } else {
                                alert(data.msg)
                            }
                        }
                    })
                }
            }
        }
    })
</script>
<script type="text/javascript">
    layui.use(['upload'], function () {
        let upload = layui.upload;
        let uploadInst = upload.render({
            elem: '#test1'
            , url: '/upload/pictureUpload'
            , done: function (res) {
                //如果上传失败
                if (res.code == 0) {
                    layer.msg('上传成功');
                    $("#editUserPic").attr("src", res.data);
                } else {
                    layer.msg("上传失败")
                }
            }
        })
    })
</script>
</body>
</html>